import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './styles/react-split-pane.css';
import App from './App.tsx';
import reportWebVitals from './reportWebVitals.ts';
import { NovelProvider } from './context/NovelContext.tsx';
import { FileSystemProvider } from './context/FileSystemContext.tsx';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

// 创建材料UI主题
const theme = createTheme({
  palette: {
    primary: {
      main: '#3f51b5',
      light: '#757de8',
    },
    secondary: {
      main: '#f50057',
    },
    background: {
      default: '#f5f5f5',
      paper: '#ffffff',
    },
  },
});

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <FileSystemProvider>
        <NovelProvider>
          <App />
        </NovelProvider>
      </FileSystemProvider>
    </ThemeProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
